<template>
    <div class="safe-main">
        <div class="safe-content">
            <div class="safe-item" v-for="(item, index) in warnInfo" :key="index">
                <span class="time">{{ item.time }}</span>
                <span class="info">{{ item.info }}</span>
            </div>
        </div>
        <el-dialog title="预警设置" v-model="openDialog" @close="close" width="400px" draggable>
            <el-form :model="form" :rules="rules" ref="warningForm" label-width="160px">
                <el-form-item label="24小时气温大于" prop="maxTEM" >
                    <el-input-number v-model="form.maxTEM" autocomplete="off" style="width: 120px"></el-input-number>
                    ℃预警
                </el-form-item>
                <el-form-item label="24小时气温小于" prop="minTEM">
                    <el-input-number v-model="form.minTEM" autocomplete="off" style="width: 120px"></el-input-number>
                    ℃预警
                </el-form-item>
                <el-form-item label="24小时累计降水大于" prop="maxRHU">
                    <el-input-number v-model="form.maxRHU" autocomplete="off" style="width: 120px"></el-input-number>
                    mm预警
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="submit">确定</el-button>
                <el-button type="primary" @click="close()">
                取消
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch, defineEmits, getCurrentInstance, nextTick} from 'vue'
import { getHourForest } from '@/api/index'
import moment from 'moment'

const props = defineProps(['showSettingDialog'])
const emit = defineEmits(['close'])
onMounted(() => {
    getData()
})
const openDialog = ref(false)

watch(
    () => props.showSettingDialog,
    (newValue) => {
        if(newValue) {
            openDialog.value = true
        } else {
            openDialog.value = false
        }
    },
);


const tempData = ref([])
const humidityData = ref([])
const warnInfo = ref([])
const minTemp = ref(-10)
const maxTemp = ref(40)
const maxHumidity = ref(50)
const currentTime = ref()
const form = ref({
    maxTEM: 40,
    minTEM: -10,
    maxRHU: 50
})

const { proxy } = getCurrentInstance()

const rules = {
    maxTEM: [
        { required: true, message: '请输入温度', trigger: 'blur' },
    ],
    minTEM: [
        { required: true, message: '请输入温度', trigger: 'blur' },
    ],
    maxRHU: [
        { required: true, message: '请输入降水量', trigger: 'blur' },
    ],
}

function submit() {
    proxy.$refs['warningForm'].validate((valid) => {
        if (valid) {
            getData()
            nextTick(() => {
                close()
            })
        }
    })
}

function getData() {
    warnInfo.value = []
    currentTime.value = moment().format('MM-DD HH:mm')
    fetchData('TMP')
    fetchData('TP1H')
}

defineExpose({ getData })

function fetchData (type) {
    let params = {
        longitude: '114.3989',
        latitude: '38.0197',
        hour: '08',
        docType: '000-072',
        element: type,
    }
    getHourForest(params).then(res => {
        let obj = res.data.obj
        if (type == 'TMP') {
            tempData.value = obj.slice(0, 12)
            if (tempData.value) {
                for(let i=0; i<tempData.value.length; i++) {
                    if (Number(tempData.value[i].numValue) < form.value.minTEM) {
                        warnInfo.value.push({
                            time: currentTime.value,
                            info: '未来24小时内气温预计会达到<'+ form.value.minTEM + '℃'
                        })
                        break
                    }
                }
                for(let i=0; i<tempData.value.length; i++) {
                    if (Number(tempData.value[i].numValue) > form.value.maxTEM) {
                        warnInfo.value.push({
                            time: currentTime.value,
                            info: '未来24小时内气温预计会达到>'+ form.value.maxTEM + '℃'
                        })
                        break
                    }
                }
                
            }
        } else {
            humidityData.value = obj.slice(0, 12)
            if (humidityData.value) {
                for(let i=0; i<humidityData.value.length; i++) {
                    if (Number(humidityData.value[i].numValue) > form.value.maxRHU) {
                        warnInfo.value.push({
                            time: currentTime.value,
                            info: '未来24小时内累计降水预计会达到>' + form.value.maxRHU + 'mm'
                        })
                        break
                    }
                }
            }
        }
    })
}
function close() {
    openDialog.value = false
    emit('close', false);
}
</script>

<style lang="scss" scoped>
.safe-main {
    width: 470px;
    height: 460px;
    background: url('@/assets/images/weather/安全预警提醒背景.png');
    position: relative;
    .safe-content {
        width: 400px;
        height: 350px;
        position: absolute;
        top: 90px;
        left: 30px;
        .safe-item {
            color: #fff;
            font-size: 18px;
            margin-bottom: 9px;
            .time {
                margin-right: 40px;
            }
        }
    }
}

</style>
